<template >
  <div class="marign_auto">

    <Head>
      <h1>我的钱包</h1>
    </Head>
    <div class="flas_xis">
      <div class="mingxi_mudaikuangdanji">
        <div class="border_left">
          <p>
            我的平驾币&nbsp;&nbsp;
            <van-icon name="question" />
          </p>
          <p>
            <span class="storng">{{ this.$store.state.userbag.accountBalance }}</span>
            &nbsp;&nbsp;枚
          </p>
        </div>
        <div>
          <div is-link @click="showPopup" class="bor_rder">使用明细</div>
        </div>
      </div>
      <div class="mingxi_mudaikuangdanji">
        <div class="border_left">
          <p>
            可用积分&nbsp;&nbsp;
            <van-icon name="question" />
          </p>
          <p>
            <span class="storng">{{ this.$store.state.userbag.integration }}</span> &nbsp;&nbsp;分
          </p>
        </div>
        <div>
          <div is-link @click="showPopup" class="bor_rder">使用明细</div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" :style="{ height: '3.28rem', width: '4.5rem', fontSize: '.24rem' }">
      <div class="taichu_c">
        <p>使用说明</p>
        <div>
          <p>1.1平驾币＝1元</p>
          <p>2.平驾币可用于冲抵租车消费</p>
          <p>3.平驾币不可取现</p>
          <p>4.1积分=1元，每单最高可使用积分冲抵40%的租车费用</p>
        </div>
      </div>
    </van-popup>
    <div class="recharge">
      <div class="nav_flas">充值额度</div>
      <ul class="jussd_s">
        <li v-for="(item, index) in list" :key="index" @click="bianse(index)" :class="item.flass ? 'bor_bluck' : ''">
          <p @click="getadd(item)">
            <span>{{ item.num }}</span>枚
          </p>
          <p class="last_ch">
            送
            <span>{{ item.somois }}</span>积分
          </p>
        </li>

        <li v-if="ifels" @click="qitas">
          <p>
            <span>其他金额</span>
          </p>
        </li>
        <li class="botm_sc" v-else>
          <input type="text" v-model="addmoney" />
        </li>
      </ul>
    </div>
    <div v-show="flsdd">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell clickable @click="radio = '1'" class="wei_x">
            <img src="../../assets/dingdanxinxi/weixin.jpg" alt />
            微信
            <template #right-icon>
              <van-radio name="1" icon-size=".32rem" />
            </template>
          </van-cell>
          <van-cell clickable @click="radio = '2'" class="wei_x">
            <img src="../../assets/dingdanxinxi/zhifubao.jpg" alt />
            支付宝
            <template #right-icon>
              <van-radio name="2" icon-size=".32rem" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <div class="wei_x">
        <div>
          <span>更多支付方式</span>
        </div>
        <van-icon name="play" class="xuan_zhuan" />
      </div>
    </div>
    <div :class="flsdd ? 'zhifu' : 'zhifus'" v-text="zhifus" @click="tijiao"></div>
    <div>
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show2">
        <div class="sg-qrcode">
          <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
            backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
            logoBackgroundColor="black"></vue-qr>
          <h2>请用微信扫码支付</h2>
          <h2>￥<b>0.01</b>元 </h2>
          <div>订单的状态:{{ paystatus }}</div>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
            @click="yizhifu_weixin">
            已支付</van-button>
        </div>
      </van-popup>
    </div>
    <div>
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show3">
        <div class="sg-qrcode">
          <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
                  backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
                  logoBackgroundColor="black"></vue-qr>
          <h2>请用支付宝扫码支付</h2>
          <h2>￥<b>0.01</b>元 </h2>
          <div>订单的状态:{{ paystatus }}</div>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
                      @click="yizhifu_zfb1">
            已支付</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import Head from "../jingtai_/header";
import { createMQ,bag, addmoney, getNativeCodeUrl,getNativeCodeUrl1, queryPayStatus ,queryPayStatus1,addmoney1} from "../../request/userinfo/userinfo";
import vueQr from 'vue-qr';
import qs from 'qs'
Vue.use(vueQr);
Vue.use(Toast);
export default {
  props: {},
  data() {
    return {
      show2: false,
      show3: false,
      code_url: "",
      paystatus: "",
      timer1: "",
      id: "",
      accountBalance: "",
      amount:"",
      show: false,
      radio: "1",
      activeIcon: "./../../assets/weixin.png",
      inactiveIcon: "./../../assets/zhifubao.png",
      only: "",
      zhifus: "立即充值",
      flsdd: false,
      ifels: true,
      addmoney: 0,
      memberId: this.$store.state.userbag.id,
      // accountStatement: {
      //   Amount: this.addmoney,
      //   MemberId: this.$store.state.userbag.id
      // },
      list: [
        {
          num: "500",
          somois: "50",
          flssdd: false,
          flass: false,
        },
        {
          num: "1000",
          somois: "100",
          flssdd: false,
          flass: false,
        },
        {
          num: "2000",
          somois: "200",
          flssdd: false,
          flass: false,
        },
        {
          num: "5000",
          somois: "500",
          flssdd: false,
          flass: false,
        },
        {
          num: "10000",
          somois: "1000",
          flssdd: false,
          flass: false,
        },
      ],
      userbag: {},
    };
  },
  mounted() {
    bag({
    }).then((res) => {
      this.$store.state.userbag = res.data;
    });
    // this.timer1 = setInterval(() => { this.queryPayStatus(this.order.orderNum); }, 3000)
  },
  methods: {
    // async zhifu() {
    //   this.show2 = true;
    //   getNativeCodeUrl({
    //     amount: this.addmoney,
    //     memberId: this.$store.state.userbag.id
    //   })
    //     .then((res) => {
    //       console.log(res)
    //       this.code_url = res.data.code_url;
    //       this.id = res.data.id;
    //       this.accountBalance = res.data.amount;
    //     });
    // },
    handleClose(done) {
       this.$confirm('确认关闭？').then(_ => { done(); }).catch(_ => { }); 
    },
    getadd(v) {
      // console.log(v.num);
      this.addmoney = v.num;
    },
    //已支付
    yizhifu_weixin() {
      //console.log("2===="+this.amount);
      queryPayStatus({
        //传递accountOrderId
        id: this.id, 
      })
        .then((r) => {
          //console.log(r);
          this.paystatus = r.msg;
           if (this.paystatus == "支付成功") {
             //console.log("1===="+this.amount);
            addmoney({
              amount: this.amount,
              memberId: this.memberId
            })
              .then((res) => {
                confirm("充值成功");
                this.dialogVisible = false;
                this.show2 = false;
                //刷新数据
                bag({
                }).then((res) => {
                  this.$store.state.userbag = res.data;
                });
                //this.$router.push("/banner");//完成后跳转
              });
          } else if(r.code == 501){
            this.paystatus = "订单超时，请重新购买"
          } else {
            this.paystatus = "未检测到支付完成，请重新点击按钮"
          }
        });
    },
    yizhifu_zfb1() {
      queryPayStatus1({
        //传递accountOrderId
        id: this.id,
      })
              .then((r) => {
                this.paystatus = r.msg;
                if (this.paystatus == "支付成功") {
                  addmoney({
                    amount: this.amount,
                    memberId: this.memberId
                  })
                          .then((res) => {
                            confirm("充值成功");
                            this.dialogVisible = false;
                            this.show3 = false;
                            //刷新数据
                            bag({
                            }).then((res) => {
                              this.$store.state.userbag = res.data;
                            });
                            //this.$router.push("/banner");//完成后跳转
                          });
                } else if(r.code == 501){
                  this.paystatus = "订单超时，请重新购买"
                } else {
                  this.paystatus = "未检测到支付完成，请重新点击按钮"
                }
              });
    },
    tijiao() {
      if (this.radio=="1"){
        getNativeCodeUrl({
          amount: this.addmoney,
          memberId: this.$store.state.userbag.id
        })
                .then((res) => {
                  this.code_url = res.data.codeUrl;
                  this.id = res.data.id;
                  this.amount = res.data.money;
                  this.memberId = this.$store.state.userbag.id;
                  createMQ({
                    id:this.id
                  }).then((res)=>{

                  })
                });
        this.show2 = true;
      }
      if (this.radio=="2"){

        getNativeCodeUrl1({
          amount: this.addmoney,
          memberId: this.$store.state.userbag.id
        })
            .then((res) => {
              this.code_url = res.data.url;
              this.id = res.data.orderId;
              this.amount = res.data.money;
              this.memberId = this.$store.state.userbag.id;
              createMQ({
                id:this.id
              }).then((res)=>{

              })
            });
        this.show3 = true;
      }

    },
    showPopup() {
      this.show = true;
    },
    bianse(v) {
      this.list.forEach((item) => {
        item.flass = false;
      });
      this.list[v].flass = true;
      this.flsdd = true;
      this.ifels = true;
    },
    qitas() {
      this.list.forEach((item) => {
        item.flass = false;
      });
      this.flsdd = true;
      this.ifels = false;
    },
  },
  components: {
    Head,
  },
};
</script>

<style scoped lang="less">
.marign_auto {
  font-size: 0.24rem;
  margin: 0 0.24rem;
}

.flas_xis {
  height: 4.44rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flas_xis>div:last-child {
  background-color: #f3966e;

  .bor_rder {
    background-color: #f08c29;
  }
}

.mingxi_mudaikuangdanji {
  width: 100%;
  background-color: #1885fe;
  height: 2rem;
  border-radius: 0.18rem;
  display: flex;
  justify-content: space-between;

  .border_left {
    margin-left: 0.48rem;
    color: white;

    &>p:last-child {
      margin-top: 0.1rem;
    }

    &>p {
      font-size: 0.24rem;

      &>.storng {
        font-size: 0.48rem;
      }
    }
  }

  &>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  &>div>.bor_rder {
    color: white;
    font-size: 0.24rem;
    background-color: #0d5fd7;
    width: 1.32rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
  }
}

.recharge {
  font-size: 0.28rem;
  color: #000;

  .nav_flas {
    line-height: 0.86rem;
    height: 0.86rem;
  }

  .jussd_s {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;

    &>.bor_bluck {
      border-left: 2px solid #3d88f7;
      border-right: 2px solid #3d88f7;
      border-top: 2px solid #3d88f7;
      border-bottom: 2px solid #3d88f7;
    }

    &>li {
      box-sizing: border-box;
      width: 2.24rem;
      height: 0.99rem;
      border-radius: 0.06rem;
      background-color: #f2f2f2;
      border-top: 2px solid #fafafa;
      border-bottom: 2px solid #fafafa;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      margin-bottom: 0.09rem;

      &>.last_ch {
        margin-top: 0.1rem;
        font-size: 0.24rem;
        color: #333333;
      }
    }
  }
}

.taichu_c {
  color: #333333;
  margin: 0.38rem 0.3rem 0.3rem 0.3rem;

  &>p {
    font-size: 0.28rem;
  }

  &>div {
    margin-top: 0.24rem;
  }

  &>div>p {
    line-height: 0.38rem;
  }
}

.wei_x {
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.8rem;
  padding: 0;

  &>div {
    display: flex;
    align-items: center;

    &>img {
      margin-right: 0.29rem;
      width: 0.48rem;
      height: 0.48rem;
    }
  }
}

.xuan_zhuan {
  transform: rotateZ(90deg);
  width: 0.26rem;
  height: 0.26rem;
}

.zhifu {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #3d88f7;
  color: white;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}

.zhifus {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #f2f2f2;
  color: #999999;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}

.botm_sc {
  input {
    height: 100%;
    width: 100%;
    color: #0d5fd7;
    text-align: center;
    border: none;
    border: 2px solid #3d88f7;
    border-radius: 0.08rem;
  }
}

.van-loading__spinner--spinner {
  width: 1rem !important;
  height: 1rem !important;
}

.van-toast {
  width: 1rem;
  height: 1rem;
}

.sg-qrcode {
  /*color: deepskyblue;*/
  color: #2ba245;
}
</style>